<template>
  <div class="bbb">

      <el-row :gutter="20">
        <el-col :span="8">
          <div style="padding: 40px">
          </div>
        </el-col>
        <el-col :span="8">
          <div class="ms-login" >
          <el-form label-position="left" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"  class="demo-ruleForm"  >
          <h3 data-v-2c8a1058="" class="title">管理员登录</h3>
          <el-form-item  prop="username">
          <el-input v-model="ruleForm2.username" placeholder="请输入用户名">aaa</el-input>
          </el-form-item>
          <el-form-item  prop="password">
          <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
          <el-button style="width: 100%" type="primary" @click.native="login">登录</el-button>
          <!--<el-button @click="resetForm('ruleForm2')">重置</el-button>-->
          </el-form-item>
          </el-form>

          </div>
        </el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>




  </div>
</template>

<script>
  //import {router} from '../router/index.js'
  import store from '../../vuex/store'
  export default {
    name: "login_admin",

    data() {

      var checkUsername =(rule,value,callback)=>{
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
          callback();
      };

      return {
        ruleForm2: {
          password: '',
          username: '',
        },
        rules2: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          username: [
            { validator: checkUsername, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {

      login:function () {
        if (this.ruleForm2.username ==="") {
          this.$message.error("未填写用户名");
          return;

        }
        if (this.ruleForm2.password ==="") {
          alert("密码不能为空");
          return;
        }
        var fd = new FormData();
        fd.append("username",this.ruleForm2.username);
        fd.append("password",this.ruleForm2.password);
        let config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencod'
          }
        };
        this.$axios.post("/api/user/login/admin", fd,config).then( res => {
          console.log(res);
          if (res.data.code ===1) {
            sessionStorage.setItem('Token', res.data.data);//将token存到sesion中
              this.getUserInfo();//校验token
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch( res => {
          console.log(res);
        })
      },
        getUserInfo:function () {
            var token='Bearer '+sessionStorage.getItem("Token");
            let config = {
                headers: {
                    'Authorization':token,
                }
            };
            console.log(token);
            var url = "/api/user/getPersonalInfo_admin";
            console.log(url);
            this.$axios.get(url,config).then(res=> {
                console.log(res);
                if(res.data.code===1) {
                    store.state.userInfo = res.data.data;
                    sessionStorage.setItem('userInfo', JSON.stringify(res.data.data));
                    // console.log(">>>>>>>>>>>>>>>>>");
                    // console.log(JSON.parse(sessionStorage.getItem('userInfo')).username);

                    this.$message.success("登录成功");
                    this.$router.push({path: '/dashboard_admin'});//跳转页面
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch( res => {
                console.log(res);
                this.$message.error("登录失败info");
            })
        }

    }
  }
</script>

<style scoped>

  .bbb {
    width: 100%;
    height: 600px;
    overflow: hidden;
    display: inline-block;
    /*background: url("../assets/background1.jpg")no-repeat;*/
    /*background-size: 100% 100%;*/
    /*border-image-repeat: repeat;*/
    background:  #373a4b;
  }

  .ms-login{
    position: absolute;
    /*left:47%;*/
    top:150px;
    width:30%;
    height:250px;
    /*margin:-150px 0 0 -190px;*/
    padding:40px;
    /*border-radius: 5px;*/
    background: #fff;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

</style>
